<script setup lang="ts">
import { reactive } from 'vue';

const props: any = defineProps<{
    ujt?: any;
    room?: any;
}>();
const { $fn } = props.ujt;
const chatData: any = reactive({
    list: [],
    send: {
        msg: '1111111111',
    },
});
const wsname = props?.room?.wsname || 'web';
$fn.useWs(props.ujt, wsname);
$fn.ws[wsname].init().then(() => {
    console.log(666.0, $fn.ws[wsname]);
    $fn.ws[wsname].wsWatch(
        {
            ty: 'chat/weblist',
        },
        (res: any) => {
            console.log(666.001, res);
            chatData.list.unshift(...res.db);
        }
    );
});
function sendSubmit() {
    $fn.ws[wsname]
        .wsApi({
            ty: 'chat/websend',
            db: chatData.send,
        })
        .then(() => {
            // chatData.send.msg = '';
        });
}
</script>

<template>
    <div class="as-chat-room">
        <div class="as-chat-header">
            <slot name="chatheader">
                <div class="as-chat-tit">{{ room?.tit || 'CHAT' }}</div>
            </slot>
        </div>
        <div class="as-chat-body">
            <slot name="chatbody">
                <div class="as-chat-con">
                    <div v-for="item in chatData.list">
                        {{ item.msg }}
                    </div>
                </div>
            </slot>
        </div>
        <div class="as-chat-footer">
            <slot name="chatfooter">
                <div class="as-chat-footer-main">
                    <div class="as-chat-opt">标签</div>
                    <div class="as-chat-input">
                        <input
                            type="text"
                            v-model="chatData.send.msg"
                            placeholder="请输入内容"
                        />
                    </div>
                    <div class="as-chat-btn">
                        <button @pointerdown="sendSubmit()">发送</button>
                    </div>
                </div>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">
.as-chat-room {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    .as-chat-header,
    .as-chat-footer {
        height: auto;
    }
    .as-chat-header {
        .as-chat-tit {
            font-size: large;
        }
    }
    .as-chat-body {
        flex-grow: 1;
        overflow: auto;
        .as-chat-con {
            padding: 0 10px;
            background-color: beige;
            min-height: 100%;
        }
    }
    .as-chat-footer {
        .as-chat-footer-main {
            display: flex;
            .as-chat-opt,
            .as-chat-btn {
                width: auto;
            }
            .as-chat-input {
                flex-grow: 1;
                input {
                    width: 100%;
                }
            }
        }
    }
}
</style>
